<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<script src="${ctx}/static/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="${ctx}/static/bootstrap/2.2.2/css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="${ctx }/webresources/skin/vista/artDialog/artDialog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx }/webresources/component/artDialog/artDialog.js"></script>
<script type="text/javascript" src="${ctx }/static/js/artdialogTools.js"></script>
<script type="text/javascript" src="${ctx }/webresources/component/artDialog/plugins/iframeTools.js"></script>
	<title>收费</title>
	
<script type="text/javascript">
	$(document).ready(function(){
		$(".cnt,.cycle").bind("keyup",function(){
			chageOneRowSum(this);
		});
		$(".cnt,.cycle").bind("blur",function(){
			chageOneRowSum(this);
		});
	});
	//art的弹出框
	function artWin(url){
		art.dialog.open(url);
	}
	//abled基准及付值
	function selectPaln(obj){
		setAllscalDisabled();
		var jo = $(obj);
		var pid = jo.val();
		var data = jo.attr("data");
		if(data == ""){
			$("#allcheckBox").attr("disabled","disabled");
			return;
		}
		$("#allcheckBox").removeAttr("disabled");
		
		initScalCnt(data);
		/* $.each(sid.split(","),function(inx,o){
			var inputss  = $("#tr-" + o).find(":input");
			inputss.removeAttr("disabled");
			inputss.attr("checked","checked");
		}); */
		
		
	}
		
	
	//初始化基准的数量
	function initScalCnt(data){
		var toJSON = eval("(" + data + ")");
		$.each(toJSON,function(inx,o){
			var inputss  = $("#tr-" + o.id).find(":input");
			inputss.removeAttr("disabled");
			inputss.attr("checked","checked");
			
			var cntInput = $("#input-" + o.id);
			
			cntInput.val(o.cnt);
			
			var cycleInput = $("#cycle-" + o.id);
			cycleInput.val(o.cycle);
			
			
			chageOneRowSum(cntInput);
		});
	}
	
	//给所有基准设置成 不可用
	function setAllscalDisabled(){
		var tempInput = $("#secal").find(":input:not(:checkbox)");
		tempInput.attr("disabled","disabled");
		$("#secal").find(":checkbox").removeAttr("checked");
		$(".cnt").val("");
		$(".cycle").val("");
	}
	
	//点击check时。对数量的input进行
	function chageCntInput(obj){
		var jo = $(obj).parent().parent().find(".cnt,.cycle");
		if(obj.checked){
			jo.val("");
			jo.removeAttr("disabled");
		}else{
			jo.val("");
			jo.attr("disabled","disabled");
		}
		chageOneRowSum(obj);
	}
	//全选checkbox
	function allCheckbox(obj){
		var parent = $(obj).parent().parent().parent();
		var jo = parent.find(":input:not('.noMe')");
		if(obj.checked){
			jo.removeAttr("disabled");
			parent.find(":checkbox").attr("checked","checked");
		}else{
			jo.attr("disabled","disabled");
			parent.find(":checkbox").removeAttr("checked");;
		}
	}
	
	//一个Input的值变化时，更新总钱数
	function chageOneRowSum(obj){
		var jo = $(obj).parent().parent();
		var cnt = jo.find(".cnt").val();
		var cycle = jo.find(".cycle").val();
		var oneMoney = jo.find(".oneMoney").text();;
		var sumMoney = jo.find(".oneRowSum");
		sumMoney.text((cnt * 1) * (cycle * 1) * (oneMoney * 1));
		sumAllSum();
	}
	
	//算出总金额
	function sumAllSum(){
		var sum = 0.0;
		$(".oneRowSum").each(function(){
			sum += ($(this).text() * 1);
		});
		$("#sumsums").text(sum);
	}
	
</script>
</head>

<body>
<form action="${ctx }/payfor/save" method="post">
<div id="content">
	<fieldset>
		<legend><small>收费</small></legend>
		<table id="contentTable" class="table table-striped table-bordered table-condensed">
			<thead>
				<tr>
					<th nowrap="nowrap">房间编号</th>
					<th nowrap="nowrap">房主姓名</th>
					<th nowrap="nowrap">房间号</th>
					<th nowrap="nowrap">查看详细</th>
				</tr>
			</thead>
			<tbody>
					<tr>
						<td nowrap="nowrap"><a href="javascript:artWin('${ctx }/ShowReport.wx?PAGEID=payForShow&txtid=${id }')">${room.houseNo}</a></td>
						<td nowrap="nowrap">${room.personName}</td>
						<td nowrap="nowrap">${room.roomNo}</td>
						<td nowrap="nowrap"><a href="javascript:artWin('${ctx }/ShowReport.wx?PAGEID=payForShow&txtid=${id }')">查看详细</a></td>
					</tr>
			</tbody>
		</table>
		<fieldset>
			<legend><small>公用方案</small></legend>
			<table id="contentTable" class="table table-striped table-bordered table-condensed">
				<tr>
					<th nowrap="nowrap">
					<c:forEach items="${publicFeePlan }" var="v">
							<label class="radio inline" for="planid-${v.id }"> 
								<input type="radio" onclick="selectPaln(this)"  sid="${v.scalIds }" data='${v.sccalByJSON }' value="${v.id }" id="planid-${v.id }" name="planid"/>
								${v.name }
							 </label> 
					</c:forEach>				
					</th>
				</tr>
			</table>			
			<legend><small>收费方案</small></legend>
			<table id="contentTable" class="table table-striped table-bordered table-condensed">
				<tr>
					<td nowrap="nowrap">
						<c:forEach items="${personalPaln }" var="v">
								<label class="radio inline" for="planid-${v.id }">
									<input id="planid-${v.id }" type="radio" sid="${v.scalIds }" name="planid" value="${v.id }" onclick="selectPaln(this)"/>${v.name }
								</label>
						</c:forEach>
					</td>
				</tr>
			</table>
			<legend><small>收费标准</small></legend>
			<table id="secal" class="table table-striped table-bordered table-condensed">
					<tr>
						<th nowrap="nowrap"><input id="allcheckBox" type="checkbox" class="noMe" onclick="allCheckbox(this)"/></th>
						<th nowrap="nowrap">基准名</th>
						<th nowrap="nowrap">单价(元)</th>
						<th nowrap="nowrap">数量</th>
						<th nowrap="nowrap">周期(月)</th>
						<th nowrap="nowrap">总价(元)</th>
					</tr>
					<c:set value="0" var="i"></c:set>
					<c:forEach items="${allScal }" var="v" varStatus="st">
					<tr id="tr-${v.id }">
						<td nowrap="nowrap">
							<input id="scalId-${v.id }" onclick="chageCntInput(this)"  type="checkbox" name="data[${st.index }].id" value="${v.id }" />
						</td>
						<td nowrap="nowrap">
								${v.name }
						</td>
						<td nowrap="nowrap" class="oneMoney">
								${v.money }
						</td>
						<td nowrap="nowrap">
							<input size="3" style="width: 30px" type="text" id="input-${v.id }"  name="data[${st.index }].cnt" disabled="disabled" class="cnt chageClass"/>
						</td>
						<td nowrap="nowrap">
							<input size="3" style="width: 30px" type="text" id="cycle-${v.id }"  name="data[${st.index }].cycle" disabled="disabled" class="cycle chageClass"/>
						</td>
						<td nowrap="nowrap" class="oneRowSum">0.00</td>
					</tr>
				</c:forEach>
			</table>
			
			<legend><small></small></legend>
			<div align="right" style="margin-right: 10%"><h2>总金额：<span id="sumsums">0.00</span></h2></div>
		</fieldset>
	</fieldset>
	
	<div class="form-actions" align="center">
		<input id="submit_btn" class="btn btn-primary" type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;	
		<input id="cancel_btn" class="btn" type="button" value="返回" onclick="art.dialog.close()"/>
	</div>
</div>
</form>
</body>
</html>

